import React, { useEffect, useState } from 'react'
import { connect } from "react-redux"
import { Layout } from 'antd';
import { Switch, Route, Redirect } from "react-router-dom"
import "./app.css"
import Absid from "./../../components/Absid"
import Shop from '../gen/shop';
import Goods from '../gen/goodstype';
import Portrait from '../../components/Portrait'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,

} from '@ant-design/icons';
const { Header, Sider, Content } = Layout;


function Index(props) {

  useEffect(() => {
    props.dispatch({
      type: "getMenus",
      username: "bobo"
    })
  }, [])
  const [collapsed, setcollapsed] = useState(false)

  const toggle = () => {
    setcollapsed(!collapsed)
  }
  return (
    <div>
      <Layout className='mian'>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <Absid collapsed={collapsed} toggle={toggle}></Absid>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: toggle,
            })}
            <Portrait className='headr'></Portrait>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            {/* 路由跳转 */}
            <Switch>
              <Redirect exact from="/home" to="/home/homePage"></Redirect>
              <Route path="/gen/shop" component={Shop}></Route>
              <Route path="/gen/goodstype" component={Goods}></Route>
            </Switch>
          </Content>
        </Layout>
      </Layout>

    </div>
  )
}


const mapStateToProps = (state) => {
  return {
    menus: state.menuRC.menus
  }
}
export default connect(mapStateToProps)(Index)